<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true" >
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source"></select-app-source>
                </el-form-item>
                <el-form-item label="系统">
                    <select-os v-model="search.os"></select-os>
                </el-form-item>
                <el-form-item label="版本">
                    <el-input class="filter-item" clearable v-model="search.version" placeholder="版本号" style="width: 150px;"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="handleSearch">搜索</el-button>
                    <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="create" plain>添加配置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-col :xl="12">
            <el-table
                v-loading.body="loading"
                ref="multipleTable"
                stripe
                border
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                class="text-center"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40"/>
                <el-table-column label="ID" prop="id" width="50"/>
                <el-table-column label="渠道号" prop="source" width="120">
                    <template slot-scope="scope">
                        <tag-app-source :source="scope.row.source"></tag-app-source>
                    </template>
                </el-table-column>
                <el-table-column label="系统类型" prop="os" width="80">
                    <template slot-scope="scope">
                        <tag-os :data="scope.row.os"></tag-os>
                    </template>
                </el-table-column>
                <!--            <el-table-column label="版本号" prop="version"/>-->
                <el-table-column label="备注" prop="remark">
                    <template slot-scope="scope">
                        <template v-if="scope.row.remark.length > 10">
                            <el-popover
                                trigger="hover"
                                placement="top"
                                :content="scope.row.remark">
                                <el-button  slot="reference">查看</el-button>
                            </el-popover>
                        </template>
                        <template v-else>
                            {{ scope.row.remark || '-' }}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="配置数据" prop="configs">
                    <template slot-scope="scope">
                        <el-popover
                            trigger="hover"
                            title="预览"
                            placement="top"
                            :content="JSON.stringify(scope.row.configs)">
                            <el-button  slot="reference">预览</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <!--            <el-table-column label="创建时间" prop="created_at"/>-->
                <el-table-column label="更新时间" prop="updated_at" width="160"/>
                <el-table-column label="操 作" width="150px">
                    <template slot-scope="scope">
                        <el-button

                            type="primary"
                            @click="edit(scope.row)">
                            编辑
                        </el-button>
                        <destroy-confirm
                            route="clientConfig/Destroy"
                            :primary="scope.row.id"
                            @success="handleSearch">
                        </destroy-confirm>
                    </template>
                </el-table-column>
            </el-table>

            <div class="mt-10 pull-left">
                <destroy-multiple
                    route="clientConfig/DestroyMultiple"
                    :selected="selected"
                    @success="handleSearch">
                    <el-button type="danger"  plain>删除选中</el-button>
                </destroy-multiple>
            </div>

            <el-pagination
                class="pull-right"
                background
                :current-page.sync="pageNo"
                :page-sizes="pageOptions.pageSizesList"
                :page-size="pageSize"
                :layout="pageOptions.layout"
                :total="totalDataNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </el-col>

    </div>
</template>

<script>
import TagOs from '~/components/Tag/os'
    export default {
        components: {
            TagOs,
        },
        data() {
            return {
                search: {
                    source: '',
                    os: '',
                    version: '',
                },
                loading: false,
                selected: [],
                tableData: [],
                pageNo: 1,
                pageSize: 15,
                totalDataNumber: 0,
                pageOptions: this.$store.state.backend.pageOptions,
                options: this.$store.state.clientConfig.options,
            }
        },
        watch: {
            '$route' (val) {
                if (val.name === 'clientConfig.index') {
                    this.initData();
                }
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pageNo = 1;
                this.pageSize = parseInt(`${val}`);
                this.handleSearch();
            },
            handleCurrentChange(val) {
                this.pageNo = parseInt(`${val}`);
                this.handleSearch();
            },
            handleSelectionChange(val) {
                this.selected = val;
            },
            handleSearch() {
                this.loading = true;
                let filter = Object.assign({}, this.search, {
                    page: this.pageNo,
                    pageSize: this.pageSize,
                });
                this.$store.dispatch('clientConfig/Lists', filter).then(res => {
                    this.tableData = res.data.data;
                    this.totalDataNumber = res.data.meta.total;
                }).finally(() => {
                    this.loading = false;
                });
            },
            initData() {
                this.handleSearch();
            },
            create() {
                this.$router.push({name: 'clientConfig.create'});
            },
            edit(row) {
                this.$router.push({name: 'clientConfig.edit', params: {id: row.id}});
                //this.$router.push('manager/'+ row.id);
            },
        },
        created() {
            this.initData();
        }
    }
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>


